<template>
  <div class="bg-form">
    <el-form :model="addForm" label-width="80px" :show-message="false" :rules="addFormRules" ref="addForm">
      <el-row>
        <el-col :span="12">定金信息</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-row>
        <el-col :span="6">
          <el-form-item label="订单号:" prop="carOrderNo">
            <el-input disabled v-model="addForm.depositOrderNo" clearable placeholder="订单号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="缴纳日期:" prop="paymentTime">
            <el-date-picker
              disabled
              style="width: 100%"
              v-model="addForm.paymentTime"
              type="date"
              placeholder="缴纳日期"
              clearable
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="销售顾问:" prop="saleName">
            <el-input disabled v-model="addForm.saleName" clearable placeholder="销售顾问"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="销售门店:" prop="storeId">
            <el-select
              disabled
              class="w-100"
              clearable
              v-model="addForm.storeId"
              placeholder="销售门店"
            >
              <el-option
                v-for="item in stores"
                :key="item.id"
                :value="item.id"
                :label="item.storeName"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="购车车型:" prop="carModelName">
            <el-input disabled v-model="addForm.carModelName" clearable placeholder="购车车型"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户手机:" prop="clientPhone">
            <el-input disabled v-model="addForm.clientPhone" clearable placeholder="客户手机"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户名称:" prop="clientName">
            <el-input disabled v-model="addForm.clientName" clearable placeholder="客户名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="订单类别:" prop="orderCategory">
            <el-select
              disabled
              class="w-100"
              clearable
              v-model="addForm.orderCategory"
              placeholder="订单类别"
            >
              <el-option
                v-for="item in dict['订单类别']"
                :key="item.index"
                :value="item.value"
                :label="item.text"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="定金:" prop="deposit">
            <el-input disabled v-model="addForm.deposit" clearable placeholder="定金"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="总金额:" prop="money">
            <el-input disabled v-model="addForm.money" clearable placeholder="总金额"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" align="right">
          <el-button type="primary" @click="onSubmit">返回</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getDict } from '@/utils/index'
import {
  detailById
} from '@/api/pre-sale/orderManagement/deposit'
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['stores', 'storesCalue'])
  },
  data() {
    return {
      dict: {
        sites: ['订单类别'],
        types: ['PC端', 'APP端']
      },
      addForm: {
        depositOrderNo: '',
        paymentTime: ''
      },
      addFormRules: {}
    }
  },
  mounted() {
    this.dict = getDict(this.dict.sites)
    this.getDetail()
  },
  methods: {
    // 保存
    onSubmit() {
      this.$router.go(-1)
    },
    async getDetail() {
      await detailById(this.$route.params.id).then((res) => {
        const { success, data } = res
        if (success) this.addForm = {
          ...this.addForm,
          ...data
        }
      })
    }
  }

}
</script>
<style lang="scss" scoped>
.bg-form {
  background: #ffffff;
  padding: 20px;
}
</style>

